<script lang="ts" setup>
  const props = defineProps( {
    title:{
      type:String,
      default:''
    }
  })

</script>

<template>
  <view class="card">
    <view class="card-title">
      <view class="line"></view>
      <text class="title">{{props.title}}</text>
      <slot name="option"></slot>
    </view>
    <view class="card-content">
      <slot></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .card{
    padding: 20rpx;
    background-color: #fff;
    border-radius: 14rpx;
    .card-title{
      display: flex;
      align-items: center;
      .line{
        width: 1.5px;
        height: 34rpx;
        background-color: var(--bg);
      }
      .title{
        margin-left: 5px;
        font-size: 34rpx;
      }
    }
    .card-content{
      padding: 10px 0;
    }
  }
</style>